<script setup lang="ts">
import {ref} from 'vue'
import {updatedUserFieldApi, updatedUserApi} from "@/apps/admin/api/user/user";
import {usePopupForm} from "@/components/FunctionComponents";

const emit = defineEmits<{
  (e: 'reload'): void
}>()

const {data} = defineProps<{ data: any }>()

const span = ref<number>(8)

/**
 * 编辑字段表单
 */
function updateUserFieldData(field: string) {
  usePopupForm({
    api: updatedUserFieldApi,
    query: {
      id: data.id,
      field
    },
    width: '400px',
    onSuccess: () => emit('reload')
  })
}


/**
 * 编辑表单
 */
function updatedUserData() {
  usePopupForm({
    api: updatedUserApi,
    query: {
      id: data.id
    },
    width: '640px',
    onSuccess: () => emit('reload')
  })
}
</script>
<template>
  <div v-if="data && data.id">
    <el-form label-width="80px" label-position="right" label-suffix=":">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label-width="0" size="small">
            <el-space spacer=" | ">
              <el-button type="primary" @click="updatedUserData">编辑</el-button>
            </el-space>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="会员ID">
            {{ data.id }}
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="会员名称">
            {{ data.nickname }}
            <line-edit-icon @click="updateUserFieldData('nickname')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="手机号">
            {{ data.mobile }}
            <line-edit-icon @click="updateUserFieldData('mobile')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="头像">
            <el-avatar v-if="data.avatar" :src="data.avatar" :size="30"/>
            <line-edit-icon @click="updateUserFieldData('avatar')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="性别">
            {{ data._sex }}
            <line-edit-icon @click="updateUserFieldData('sex')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="会员等级">
            {{ data._level }}
            <line-edit-icon @click="updateUserFieldData('level_id')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="会员标签">
            <el-space size="3">
              <el-tag type="primary" v-for="(tag,index) in  data._tags" :index="key">
                {{ tag }}
              </el-tag>
              <line-edit-icon @click="updateUserFieldData('tags_ids')"></line-edit-icon>
            </el-space>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="账号状态">
            <el-text v-if="data.status">使用中</el-text>
            <el-text v-else type="danger">已禁用</el-text>
            <line-edit-icon @click="updateUserFieldData('status')"></line-edit-icon>
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="注册时间">
            {{ data.created_at }}
          </el-form-item>
        </el-col>
        <el-col :span>
          <el-form-item label="上次登陆">
            {{ data.last_login }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>